{% raw %}

<script type="text/x-template" id="omesaas-collection-product-temp">
{%- capture crop_class -%}
{% if theme_config.global.product_size != '0' %}product_card-picture-crop-{{theme_config.global.product_size}}{% endif %}
{%- endcapture -%}

{%- capture text_ellipsis -%}
  {%- if theme_config.global.product_title_style == 'hide' -%}
    text-ellipsis
  {%- elsif theme_config.global.product_title_style == 'hide2' -%}
    text-ellipsis2
  {%- endif -%}
{%- endcapture -%}



{% for product in products %}

{%- capture hover_class -%}
{% if theme_config.global.product_move_two %}{% if product.images[1].src %}animation-hover{% endif %}{% endif %}
{%- endcapture -%}

{%- capture product_handle -%}
  {% if product.handle and product.handle != "" %}
    {%- if collection_product_url == '1' -%}
      /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- else -%}
      {%- if collection_handle and collection_handle != "" -%}/collections/{{collection_handle}}{% endif %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- endif -%}
  {% else %}
    javascript:;
  {%- endif -%}
{%- endcapture -%}


{%- capture product_alt -%}
{%- if product.image.alt == "" -%}
  {{ product.title }}
  {%- else -%}
  {{ product.image.alt }}
{%- endif -%}
{%- endcapture -%}

<div class="collection_item">
  <div>
    <a class="collection-product-item {{crop_class}} {{hover_class}} plugin-product_item-img_box" href="{{product_handle}}" alt="{{product_alt}}">
      <img class="collection-product-item-image default_img main-image" data-sizes=”auto” alt="{{product_alt}}" data-src="{{ product.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}"/>
      {% if theme_config.global.product_move_two and product.images[1].src  %}
      <img class="collection-product-item-image hover-two" data-sizes=”auto” alt="{{product_alt}}" data-src="{{ product.images[1].src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}"/>
      {% endif %}
      
  
      {% if theme_config.global.product_discount_label and product.variant.price > 0 %} 
        {% if product.variant.price < product.variant.compare_at_price %}
        {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
        {% if price > 0 %}
        <div class="discount_tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">{{ price }}% <span>OFF</span></div></div>
        {% endif %} 
        {% endif %}
        {% endif %}
  
      {%- if product.available == 0 -%}
      <div class="product_card_soldout">{{ lang.general.sold_out }}</div>
      {%- endif -%}
      {%- if theme_config.global.product_preview -%}
      <div class="actions-wrapper">
        <div class="actions-wrapper-btn product_view" data-handle="{{ product.handle }}" data-from="{{data_from}}">
          <svg class="" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" d="M15 7H9V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V7H1C0.734784 7 0.48043 7.10536 0.292893 7.29289C0.105357 7.48043 0 7.73478 0 8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H7V15C7 15.2652 7.10536 15.5196 7.29289 15.7071C7.48043 15.8946 7.73478 16 8 16C8.26522 16 8.51957 15.8946 8.70711 15.7071C8.89464 15.5196 9 15.2652 9 15V9H15C15.2652 9 15.5196 8.89464 15.7071 8.70711C15.8946 8.51957 16 8.26522 16 8C16 7.73478 15.8946 7.48043 15.7071 7.29289C15.5196 7.10536 15.2652 7 15 7Z"></path>
          </svg>
        </div>
      </div>
      {%- endif -%}

    </a>
    <div class="item-caption">
      <div>
        <a class="item-caption-title {{text_ellipsis}} {% unless theme_config.global.product_title_model %}product_card-wap-name{% endunless %}" href="{{product_handle}}">{{ product.highlight_title | default : product.title | default:"Title" }}</a>
      </div>
      <div class="item-caption-price">
        {% if product.variant.price < 0 %}
          <span class="general-price">{{ "88.88" | money }}</span>
        {% else %}
          <span class="general-price">{{ product.variant.price | money }}</span>
        {% endif %}
        {% if product.variant.compare_at_price != "0" and  product.variant.price < product.variant.compare_at_price %}
        <span class="general-oldprice">{{ product.variant.compare_at_price | default : "88.88" | money }}</span>
        {% endif %}
      </div>
       {% if theme_config.global.product_discount_label_style_switch and product.variant.price > 0 %} 
        {% if product.variant.price < product.variant.compare_at_price %}
        <div class="product_price" style='color:var(--discount_tag_bg);margin-top: 4px;'>
            {{lang.general.save}}
            {% if theme_config.global.product_discount_label_style == 2 %}
            {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
            {{price}}%
            {% else %}
            {% assign price = product.variant.compare_at_price | minus: product.variant.price | round: 2  %}
            {{price | money}}  
            {% endif %}
        </div>
        {% endif %}
      {% endif %}
      {%- unless theme_config.global.product_is_score == false -%}
    {% if product.star > 0 %}
    {% assign width = product.star | default:0 | divided_by: 5 | times:100 %}
    <div class="moi-start-warp" style="margin-top:10px;justify-content: flex-start;">
      <div class="comment-star-warp">
        <div class="comment-star-base">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="7121" width="20" height="20">
            <path
              d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z"
              fill="{{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
    
        <div class="comment-star-base comment-star-warp-choose" style="width:{{width}}%">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="7121" width="20" height="20">
            <path
              d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z"
              fill="{{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
      </div>
       {% if theme_config.global.product_is_score_number == 2 %}
                <span>({{ product.comment_total_count }})</span>
            {% else %}
                <span>({{ product.star }})</span>
            {% endif %}
    </div>
    {% endif %}
    {%- endunless -%}
    </div>
    {% if theme_config.global.product_img_list_type != 0 %}
      <div class="block_product_img_list noRender">
          <div class="img_list" style="display: flex;justify-content: center;flex-wrap: wrap;">
        {% if theme_config.global.product_img_list_type == "1" %}
          {% assign colorOptions = theme_config.global.product_sku_options | join: ',' | downcase | split: ',' %}
          {% assign isFindSuccess = false %}
          {% if product.variants.size > 0 %}
              {% for option in product.options %}
                  {% assign option_name = option.name | downcase %}
                  {% assign hasOptionName = option_name | in_array: colorOptions %}
                  {% if hasOptionName and isFindSuccess == false %}
                      {% assign isFindSuccess = true %}
                      {% assign optionIndex = option.position | plus: 1 %}
                      {% assign optionTitle = "option" | append: optionIndex | append: "_title" %}
                      {% assign optionValueTitle = "option" | append: optionIndex | append: "_value_title" %}
                      {% assign optionValues = "" %}
                      {% assign isSelectOptions = "" %}
                      
                      {% for optionValueItem in option.values %}
                            {% assign optionValues = optionValues | append: optionValueItem.option_value | append: ',' %}
                      {% endfor %}
                      {% for variant in product.variants %}
                          {% assign varinatTitle = variant | getArrayValueByKey: optionTitle | downcase %}
                          {% assign variantValue = variant | getArrayValueByKey: optionValueTitle | downcase %}
                          {% assign hasVarinatTitle = colorOptions contains varinatTitle %}
                          {% assign hasValue = optionValues contains variantValue %}
                          
                          {% if hasVarinatTitle != '' and  hasValue != '' %}
                              {% unless isSelectOptions contains variantValue %}
                                  {% if variant.image %}
                                      {% assign isSelectOptions = isSelectOptions | append: variantValue | append: ',' %}
                                      <a href="{{ product_handle | append: "&variant_sku_code=" | append: variant.sku_code }}" class="img_list_item"><img data-src="{{variant.image.src}}"  src="{{ 'empty_loading.png' | public_asset_abs_url }}"></a>
                                  {% endif %}
                              {% endunless %}
                          {% endif %}
                      {% endfor %}
                      
                  {% endif %}
              {% endfor %}
          {% endif %}

        {% elsif theme_config.global.product_img_list_type == "2" %}
          {% if product.variants.size > 0 %}
              {% for imgsItem in product.images %}
                  <a href="{{ product_handle }}" class="img_list_item"><img data-src="{{imgsItem.src}}"  src="{{ 'empty_loading.png' | public_asset_abs_url }}"></a>
              {% endfor %}
          {% endif %}
        {% endif %}
        <div class="morNumber"></div>
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% endfor %}

</script>



{% endraw %}
